<template>
    <div class="c flex-column" v-if="form">
        <template v-if="status == 0">
            <div class="head">{{ t("等待用户上传快递信息") }}</div>
            <!-- <span class="head-desc">{{ t('快递待寄回') }}：2023-12-12 23:00:00</span> -->
            <span class="head-desc">{{ t('快递待寄回') }}</span>
            <el-divider></el-divider>
            <div class="head2">{{ t("上传退货信息") }}</div>
            <el-form :model="logistics_info" label-position="left" label-width="100px">
                <el-form-item :label="t('物流公司') + '：'">
                    <el-select style="width: 100%;" v-model="logistics_info.company" :placeholder="t('请选择')" value-key="id">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="t('物流单号') + '：'">
                    <el-input v-model="logistics_info.orderNo" :placeholder="t('请输入内容')"></el-input>
                </el-form-item>
               <!-- <el-form-item :label="t('联系电话') + '：'">
                    <el-input type="tel" v-model="logistics_info.orderNo" :placeholder="t('请输入内容')"></el-input>
                </el-form-item>
                 <el-form-item :label="t('退货说明(选填)') + '：'">
                    <el-input type="textarea" v-model="logistics_info.orderNo" :placeholder="t('请输入内容')"></el-input>
                </el-form-item>
                <el-form-item :label="t('上传图片') + '：'">
                    <el-upload class="upload" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                        :limit="9">
                        <div class="tips">
                            <i class="el-icon-plus"></i>
                            <span class="tip-t">{{ t("图片上传提示") }}</span>
                        </div>
                    </el-upload>
                </el-form-item> -->
                <!-- <el-form-item>
                    
                </el-form-item> -->
            </el-form>
        </template>
        <template v-if="status == 1">
            <div class="head">{{ t("等待用户退款") }}</div>
            <!-- <span class="head-desc">{{ t('快递已返回') }}：2023-12-12 23:00:00</span> -->
            <span class="head-desc">{{ t('快递已返回') }}</span>
        </template>
        <el-divider></el-divider>
        <div class="head">{{ t("协商历史") }}</div>
        <div class="user flex-row">
            <el-avatar size="large" :src="avatar"></el-avatar>
            <div class="info flex-column">
                <span class="name">MACASE</span>
                <!-- <span class="desc">平台同意用户退款说明</span> -->
            </div>
        </div>
        <div class="user flex-row">
            <el-avatar class="avatar" size="large" :src="userInfo.avatar"></el-avatar>
            <div class="info flex-column">
                <span class="name">{{ userInfo.nickname }}</span>
                <span class="desc">{{ t("退款申请", { time: $util.timeChange(form.refund_res.createtime) }) }}</span>
                <div class="form flex-column">
                    <span class="t1">{{ t("退款类型") }}:<span class="t2">{{ '仅退款' }}</span></span>
                    <span class="t1">{{ t("退款金额") }}:<span class="t2">{{ $t("公共.货币符号") }}{{ form.refund_res.price }}</span></span>
                    <span class="t1">{{ t("退款原因") }}:<span class="t2">{{ form.refund_res.refund_cause }}</span></span>
                    <span class="t1">{{ t("退款描述") }}:<span class="t2">{{ form.refund_res.refund_content }}</span></span>
                </div>
            </div>
        </div>
        <el-button class="btn" v-if="status == 0" @click="submit()">{{ t("提交") }}</el-button>
    </div>
</template>
<script>
import { 
    getExpressList,
    addRefundExpressRes
} from "@/utils/api.js";
export default {
    props: {
        goods: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo;
        }
    },
    data() {
        return {
            avatar: "",
            status: 0,
            logistics_info: {},
            options: [],
            form: null,
        }
    },
    mounted() {
        if (this.goods) {
            if (!this.goods.refund_res.express_no) {
                this.status = 0;
            }else {
                this.status = 1;
            }
            this.form = this.$util.deepClone(this.goods);
        }
        getExpressList().then(res => {
            if (res.code == 1) {
                this.options = res.data;
            }
        });
    },
    methods: {
        /**
        * 简化翻译方法(少写property)
        * @param {String} v 最后一个key值
        * @param {Object} opt 其他参数
        */
        t(v, opt) {
            if (opt) {
                return this.$t(`我的订单.${v}`, opt);
            }
            return this.$t(`我的订单.${v}`);
        },
        submit() {
            console.log(this.logistics_info.company);
            if (!this.logistics_info.company) {
                this.$message.error(this.t("请选择物流公司"));
                return;
            }
            if (!this.logistics_info.orderNo) {
                this.$message.error(this.t("请输入物流单号"));
                return;
            }
            addRefundExpressRes({
                refund_id: this.form.refund_res.id,
                express_name: this.logistics_info.company.name,
                express_no: this.logistics_info.orderNo
            }).then(res => {
                if (res.code == 1) {
                    this.$message.success(res.msg);
                    this.$EventBus.$emit("orderDialogHandle", {action: "goods_return", show: false});
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.c {
    .head {
        font-size: 20px;
        color: #333;
        font-weight: bold;

    }

    .head2 {
        color: #333;
        font-size: 20px;
        margin-bottom: 13px;
    }

    .upload {

        /deep/ .el-upload--picture-card {
            width: 100px;
            height: 100px;
            position: relative;
            border: none;
            background: #F9F9F9;
            border-radius: 10px;
        }

        /deep/ .el-upload-list--picture-card .el-upload-list__item {
            width: 100px;
            height: 100px;
        }

        .tips {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .tip-t {
                color: #999;
                width: 80%;
                line-height: 20px;
            }
        }
    }

    .btn {
        align-self: center;
        margin-top: 50px;
        background: #FF5757;
        width: 270px;
        color: #F9F9F9;
        font-size: 16px;
        border-radius: 10px;
    }

    .head-desc {
        margin-top: 14px;
        color: #999;
        font-size: 16px;
    }

    .refund-price {
        color: #333;
        font-size: 16px;
        font-weight: 400;
    }

    .user {
        margin-top: 20px;
        align-items: flex-start;

        .info {
            margin-left: 10px;

            .name {
                color: #333;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 10px;
            }

            .desc {
                color: #999;
                font-size: 16px;
                font-weight: 400;
            }

            .form {
                justify-content: flex-start;
                align-items: flex-start;

                .t1 {
                    margin-top: 20px;
                    font-size: 16px;
                    color: #333;
                }

                .t2 {
                    margin-left: 14px;
                }
            }
        }
    }
}</style>